<template>
  <div id="app" class="levelManage">
     <div class="search">
    <div class="selectOption">
          <el-button type="success" @click='addAdvertisers'> 添加协作账号</el-button>
    </div>
    </div>
    <!--协作账号页面列表-->
    <div class="contain_two" style="min-width: 675px;">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>
              <div class="">
                <span>序号</span>
              </div>
            </th>
            <th class="">
              <span>昵称</span>
            </th>
            <th>
              <div class="">
                <span>账号</span>
              </div>
            </th>
            <th><span>角色</span></th>
            <th class=""><span>操作</span></th>
          </tr>
        </thead>
        <tbody id="staff_info" class="">
          <tr class="contLi" v-for="(list,index) in tableData">
            <td>
              <div class=""><span class="">{{index+1}}</span></div>
            </td>
            <td style="width:400px;">
              <div class="" style="text-align: initial;padding-left: 150px">
                 <img :src="list.photo = list.photo == '' ? '../../../static/img/avatar5.png' : list.photo" alt="" width="23px">
                <span class="">{{list.nick}}</span>
              </div>
            </td>
            <td>
              <div class=""><span class="">{{list.name}}</span></div>
            </td>
            <td>
              <div class=""><span class="">{{list.roles[0].name}}</span></div>
            </td>
            <td class="">
              <el-button type="info" @click="edit(index)">编辑</el-button>
              <el-button type="danger" @click="open2(index)">删除</el-button>
            </td>
          </tr>
        </tbody>
      </table>

      <div class="block pagination" v-show='nullContentPagination'>
        <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="10" layout="prev, pager, next, jumper"
          :total="total">
          </el-pagination>
      </div>
      <div class="nullContent" v-show='nullContent'>暂无数据</div>
    </div>
      <!--添加协作账号弹窗-->
    <div class="tankuang" v-show="adverShow">
      <div class="bomb" style="height: 500px;">
        <div class="bomb_header">
          <p>添加协作账号</p>
          <span @click="closes"><img src="../../assets/images/icon_tanc_close@2x.png" width="10px" height="10"></span>
        </div>
        <div class="bomb_content" style="height: 352px">
          <p style="position: relative">
              <span>用户头像：</span>
              <img :src="hbImgs"
                alt="" class="logo_img" width="80" height="80" @click="uploads">
                <input type="file" style="display: none" accept="image/jpeg,image/jpg,image/png"
                  name="file" id="logofiles" class="" @change="onFileChange" />
            </p>
            <div class="clear"></div>
             <p>
                <span>用户昵称：</span>
                <input v-model="rankNumber" type="text" id="rank_number" class="rank_number advertiser" placeholder="请输入用户昵称">
            </p>
            <p>
                <span>用户账号：</span>
                <input v-model="experience" type="text"  id="experience" class="experience advertiser"  placeholder="请输入协作账号">
            </p>
            <p>
                <span>设置密码：</span>
                <input v-model="rankProfit" type="text"  id="rank_profit" class="rank_profit advertiser" placeholder="请输入密码">
            </p>
            <p>
              <span style="float:left;">账号角色：</span>
              <select v-model="selecteds" id="">
                <option v-for="(option,index) in options" v-bind:value="option.value">
                  {{ option.text }}
                </option>
              </select>
            </p>
        </div>
        <div class="bomb_footer">
          <input type="button" v-show="addcode" @click="codeedixbtn()" value="保存"> 
          <input type="button" v-show="editcode" @click="editsave()" value="保存"> 
          <input type="button" @click="cancels" value="取消">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  mapActions,
  mapState
} from 'vuex'
// 导入地址数据 
import addressData from '../../assets/js/addressData.js'
// 加载地址数据
function formatData(data) {
  return data
}
export default {
  name: 'levelManage',
  data() {
    return {   
      nullContent: false,
       nullContentPagination: true, 
      Tou:'../../../static/img/avatar5.png',
      hbdetail:false,  
      hbImg:'../../../static/img/icon_xinjian_picture@2x.png',
      hbImgs:'',
      advHomer:'',
      advTitle:'',
      total:1,
      currentPage: 1,
      value1: '',
      adverShow: false,
      tableData: [],
      lists: [],
      list:{},
      rankNumber:'',
      rankProfit:'',
      experience:'',
      money:'',
      exper:'',
      xianjin:false,
      integral:false,
      bianji:false,
      id:'',
      addcode:false,
      editcode:false,
      selecteds:'One',
      masterId:'',
      options: [
      { text: '请选择', value: 'One' },
      // { text: 'Two', value: '亿点红包' },
    ],
     sysId:'',
     loginFlag:'',
    }
  },
  created: function () {
    this.cooperManage(1)
    this.rolManage()
  },
  methods: {
    // 提示
    warning:function(){
         this.$message({
          message: '请选择正确图片格式!',
          type: 'warning'
        });
    },
       // 选择图片上传
      onFileChange(e) {
          var self = this
          var files = e.target.files || e.dataTransfer.files;
          var fileData  = files[0]
          //读取图片数据
                var reader = new FileReader();
                reader.onload = function (e) {
                     var data = e.target.result;
                    //加载图片获取图片真实宽度和高度
                     var image = new Image();
                     image.onload=function(){
                         var width = image.width;
                         var height = image.height;
                         if(width !== height){
                           self.warning()
                            return
                         }else{
                           self.uploadImage(files[0]);
                         }
                     };
                     image.src= data;
                 };
                 reader.readAsDataURL(fileData);
      },
      // 上传图片
      uploadImage(file) {
          var formdata = new FormData();
          formdata.append('token', sessionStorage.token);
          formdata.append('appId', "com_sxluckyking_double");
          formdata.append('file', file);
          formdata.append('appName', 'appName');
          this.uploadFile(formdata).then((data) => {
              console.log(data);
              if (data.code === 200) {
                   this.$message({
                      message: '上传图片成功',
                      type: 'success'
                    });
                  this.hbImgs = data.data[0].path;
              } else {
                  this.$message.error('上传图片失败');
              }
          }).catch(msg => console.log(msg));
      },
      uploads: function () {
      $("#logofiles").click();
    },
    cancels: function () {
      this.adverShow = false;
    },
    closes:function(){
      this.hbdetail = false
      this.adverShow = false
    },
    // 判断
    panduan(o) {
   var pasd=/[\u4E00-\u9FA5\s]/;
    if (this.rankNumber == null || this.rankNumber == "") {
        this.$message("请输入昵称");
        return false;
    }else if (this.rankNumber.length > 20) {
        this.$message("昵称不可以超过20个字符");
        return false;
    }

    if (this.experience == null || this.experience == "") {
        this.$message("请输入协作账号");
        return false;
    }
    if(o !="addEdact"){
        if (this.rankProfit == null || this.rankProfit == "") {
            this.$message("请输入账号密码");
            return false;
        } else if (this.rankProfit.length < 6 || this.rankProfit.length > 16) {
            this.$message("请输入6-16位账号密码");
            return false;
        }else if(pasd.test(this.rankProfit)){
            this.$message("账号密码不能为汉字和空字符");
            return false;
        }
    }

    if (this.selecteds == 'One') {
        this.$message("请选择账号角色");
        return false;
    }
    return true;
},
    // 点击添加协作账号按钮
    addAdvertisers:function(){
      this.hbImgs = this.hbImg
      this.adverShow = true
      $('.tankuang .modal-title').text("添加协作账号")   
      $('#experience').prop('disabled',false) 
      this.addcode = true
      this.editcode = false
      this.rankNumber = ''
      this.experience = ''
      this.rankProfit = ''
      this.selecteds = 'One'
    },
    // 添加协作账号下的保存
    codeedixbtn(){
      if(this.panduan() == false){
        return
      }else{
      var list = {
            token:sessionStorage.token,
            nick: this.rankNumber,//昵称
            name:this.experience,//账号
            password: this.rankProfit,//密码
            roleid: this.selecteds,//角色id
            photo:this.hbImgs = this.hbImgs == this.hbImg ? '' : this.hbImgs,
            code:'com_sxluckyking_double'
        };
      this.addcooperlist(list).then((data)=>{
        console.log(data)
          if(data.code == 200){
            this.cancels()
            this.cooperManage(this.currentPage)
          }else{
            this.$message(data.message)
          }
      }).catch(msg => console.log(msg))
      }
    },
    // 协作账户页面 编辑  
    edit(index){
      console.log(index)
      this.adverShow = true
      $('.tankuang .modal-title').text("修改协作账号")    
      this.editcode = true
      this.addcode = false
      this.hbImgs = this.tableData[index].photo == '' ? this.hbImg :this.tableData[index].photo
      this.rankNumber = this.tableData[index].nick
      this.rankProfit = this.tableData[index].password
      this.experience = this.tableData[index].name
      this.selecteds = this.tableData[index].roles[0].id
      $('#experience').prop('disabled',true)
      this.id = this.tableData[index].id
      this.sysId = this.tableData[index].sysId
      this.loginFlag = this.tableData[index].loginFlag
      console.log(this.id)
  },
  // 编辑下的保存按钮
    editsave(){
      if(this.panduan('addEdact') == false){
        return
      }else{
     var shuju = {
            token:sessionStorage.token,
            nick: this.rankNumber,//昵称
            name:this.experience,//账号
            password: this.rankProfit,//密码
            roles: this.selecteds,//角色id
            photo:this.hbImgs,
            code:'com_sxluckyking_double',
            id:this.id,
            loginFlag:this.loginFlag,
            sysId:this.sysId
        };
    this.coopereditlist(shuju).then((data)=>{
      console.log(data)
      if(data.code == 200){
            this.cancels()
            this.cooperManage(this.currentPage)
          }else{
            this.$message(data.message)
          }
    }).catch(msg => console.log(msg));
    }
    },

    
    // 获取协作账号页面数据
    cooperManage(i) {
      this.$store.commit('showLoading');
      let token = sessionStorage.token;
      this.cooperManagelist({
        token: sessionStorage.token,
        // token:'9d1729449b1c4e9cb8ac2b41d0eb209c',
        code:'com_sxluckyking_double'
      }).then((data) => {
        this.$store.commit('hiddenLoading');
        console.log(data);
        if (data.code === 200) {
          this.nullContent = false;
          this.nullContentPagination = true;
          if (data.data.list.length == 0) {
              this.nullContent = true;
              this.nullContentPagination = false;
              return;
          }
          this.tableData = data.data;
        } else {
          this.$message(data.message)
        }
      }).catch(msg => console.log(msg));
    },
    // 拉取账号角色数据
    rolManage(){
      let token = sessionStorage.token;
      this.rolManagelist({
        token: sessionStorage.token,
        code:'com_sxluckyking_double'
      }).then((data) => {
        console.log(data);
        if (data.code === 200) {
           for (let i = 0; i < data.data.length; i++) {
            this.options.push({"text":data.data[i].name,"value":data.data[i].id}) 
          }
        } else {
          this.$message(data.message)
        }
      }).catch(msg => console.log(msg));
    },
    // 协作账号页面删除
    excodeDel(i){
      this.cooperDellist({
        id:this.tableData[i].id,
        token:sessionStorage.token
      }).then((data)=>{
        console.log(data)
        if (data.code === 200) {
            this.cooperManage(this.currentPage)
        } else {
            this.$message(data.message)
        }
      }).catch(msg => console.log(msg));     
    },
    open2(index) {
      console.log(index)
      console.log(this.tableData[index].id)
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
         this.excodeDel(index)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
    // 分页跳转
    handleCurrentChange(val) {
        this.currentPage = val;
        this.levelManage(val);
    },
    
...mapActions(['cooperManagelist','rolManagelist','cooperDellist','uploadFile','addcooperlist','coopereditlist'])

  }
}

</script>
<style scoped>
.bomb_content select {
    float: left;
    width: 160px;
    height: 36px;
    border-radius: 4px;
    border: 1px solid #bfcbd9;
    margin-left: 12px;
  }
.el-button--success{
  width: 96px;
}
  td{
    padding:0!important;
    line-height: 54px!important;
  }
  
  .add_reward {
    background: rgb(82, 186, 130);
    border-radius: 5px;
    width: 115px;
    height: 36px;
    border: none;
    margin-left: 45px;
    color: #fff;
  }  
  th,
  td {
    text-align: center;
  }
  
  .contain_two {
    margin-top: 15px;
  }
  
  .tankuang {
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    overflow: auto;
    z-index: 1500;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
  }
  
  .bomb_content p {
    text-align: left;
    margin: 27px 0;
    line-height: 36px;
  }
  
  .bomb_content input[type=text] {
    width: 256px;;
    height: 36px;
    margin-left: 8px;
    border-radius: 4px;
    border: 1px solid #bfcbd9;
  }
  ::-webkit-input-placeholder {
    color:#bfcbd9;  
}  
  
  .bomb_content input[type=file] {
    display: none
  }
  
  .bomb_content img {
    margin-left: 8px;
  }
  
  .egRatio {
    width: 50%;
    top: 0;
    left: 201px;
    position: absolute;
    color: #a5a3a3;
  }
  
  
  h4 {
    border-bottom: 1px solid rgb(229, 229, 229);
    margin-bottom: 12px;
    margin-top: 10px;
    font-size: 2.2rem;
    font-weight: 300;
    text-align: left;
    line-height: 34px;
    padding-bottom: 10px;
  }
  
  .needmoney input {
    width: 50%;
  }
  
  .needmoney input[type=text] {
    width: 57%;
  }
  
  .browseunit input[type=text] {
    width: 31%;
  }
  .clickunit input[type=text] {
    width: 31%;
  }
  
  .dingxiang input[type=text] {
    width: 57%;
  }
  
  .interest li {
    width: 20%;
    float: left;
    padding: 10px 0;
  }
  .moneydafault p{
    float: left;
    margin: 0 10px;
    width:30%;
  }
  .moneydafault p input[type=text]{
    width:60%;
  }
  .fl{
    width: 50%;
    float: left;
    text-align: left;
    padding-left: 15px;
  }
  .fr{
    width: 50%;
    float: right;
    text-align: left;
  }
  .modal-detail{
    margin-top: 89px;
  }
  .modal-detail p{
    font-size: 16px;
    margin:10px 0;
  }
  .modal-detail p:nth-of-type(1){
    width: 100%;
    text-align: left;
    padding-left: 15px;
    margin: 3px 0;
    padding-top: 4px;
  }
  #ad_queue{
    margin:10px 0;
  }
  #ad_queue span{
    font-size: 16px;
  }
  .el-date-editor{
    width: 297px!important;
    margin-left:8px!important;
}
.reward li input[type=text]{
width:58%;
margin-left: 6px;
}
.reward li span{
  margin-left:5px;
}
.reward li{
  text-align: left;
  float:left;
  width:25%;
}
 table th{
    padding:0;
    height: 40px;
    line-height: 40px;
}
.table > tbody > tr{
    padding:0;
}
.table > tbody > tr > td{
    padding:0!important;
    height: 49px;
    line-height: 49px!important;
}
.table thead{
  background-color: #eef1f6;
}
.levelManage{
   width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 5px;
}
.bomb_footer input:nth-child(1) {
    background: #3C5570;
  }
  .bomb_footer input:nth-child(2) {
    background: #3C5570;
  }
  .bomb_footer input:nth-child(3) {
    background: #DDDDDD;
  }
</style>
